<template>
  <div class="app-container" style="width: 100%">
    <el-card class="box-card" style="width: 100%">
      <div slot="header" style="font-size: larger;text-align: center" class="clearfix">
        <span>报修信息</span>
      </div>
    <el-form ref="form" :model="formData" :rules="rules"  size="medium" label-width="100px" label-position="left">
      <el-row :gutter="15">
        <el-col :span="24">
          <el-form-item label="机井编号" prop="wellNumber">
            <el-tag style="width: auto">{{ this.message.wellNumber }}</el-tag>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="24">
          <el-form-item label="详细地址" prop="address">
            <span>{{ this.message.address }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="24">
          <el-form-item label="报修人" prop="reportName">
            <el-input v-model="formData.reportName" placeholder="请输入机井报修人" clearable>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
      <el-col :span="24">
        <el-form-item label="联系方式" prop="reportTel">
          <el-input v-model="formData.reportTel" placeholder="报修人号码" clearable >
          </el-input>
        </el-form-item>
      </el-col>
      </el-row>
      <el-row :gutter="15">
      <el-col :span="24">
        <el-form-item label="故障时间" prop="faultTime">
          <el-date-picker
            v-model="formData.faultTime"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            :style="{ width: '100%' }"
            placeholder="请选择日期选择"
            clearable
          ></el-date-picker>
        </el-form-item>
      </el-col>
      </el-row>
<!--      <el-row :gutter="15">-->
<!--      <el-col :span="10">-->
<!--        <el-form-item label="时间选择" prop="field108">-->
<!--          <el-time-picker-->
<!--            v-model="formData.field108"-->
<!--            format="HH:mm:ss"-->
<!--            value-format="HH:mm:ss"-->
<!--            :picker-options="{ selectableRange: '00:00:00-23:59:59' }"-->
<!--            :style="{ width: '100%' }"-->
<!--            placeholder="请选择时间选择"-->
<!--            clearable-->
<!--          ></el-time-picker>-->
<!--        </el-form-item>-->
<!--      </el-col>-->
<!--      </el-row>-->
      <el-row :gutter="15">
      <el-col :span="24">
        <el-form-item label="故障描述" prop="faultCause">
          <el-input
            v-model="formData.faultCause"
            type="textarea"
            placeholder="请输入故障信息"
            :autosize="{ minRows: 4, maxRows: 4 }"
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
      </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-form-item label="故障图片" prop="reportImg">
        <el-upload
          class="upload-demo"
          drag
          :on-remove="handleRemove"
          :on-success="handleSuccess"
          :on-error="handleError"
          :before-upload="beforeAvatarUpload"
          action="/dev-api/farmwell/fault/reportfile"
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过50Mb</div>
        </el-upload>
        </el-form-item>
      </el-row>
      <el-row :gutter="15">
      <el-col style="text-align: center" :span="24">
        <el-form-item size="large">
          <el-button type="primary" @click="open">提交</el-button>
          <el-button @click="resetForm">取消</el-button>
        </el-form-item>
      </el-col>
      </el-row>
    </el-form>
    </el-card>
  </div>
</template>

<script>
import {  getWell } from "@/api/farmwell/well";
import {addFault} from "@/api/farmwell/fault";
export default {
  components: {},
  props: [],
  data() {
    return {
      data1: '35252',
      formData: {
        wellId: '',
        wellNumber: undefined,
        reportTime: null,
        reportName: null,
        faultTime: null,
        reportTel: undefined,
        reportImg: undefined,
        faultCause: undefined,
      },
      message:{},
      rules: {
        reportTel: [
          {
            required: true,
            message: '请输入报修人号码',
            trigger: 'blur',
          },
          {
            pattern: /^1(3|4|5|7|8|9)\d{9}$/,
            message: '手机号格式错误',
            trigger: 'blur',
          },
        ],

        reportTime: [
          {
            required: true,
            message: '请选择日期选择',
            trigger: 'change',
          },
        ],
        faultTime: [
          {
            required: true,
            message: '请选择时间选择',
            trigger: 'change',
          },
        ],
        reportName:[
          {
            required: true,
            message: '请输入上报人姓名',
            trigger: 'blur',
          },
        ],
        faultCause: [
          {
            required: true,
            message: '请输入故障信息',
            trigger: 'blur',
          },
        ],
      },
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getMessage()
  },
  mounted() {
  },
  methods: {
    handleRemove(file, fileList) {
      const path= file.response.filePath;
      this.formData.reportImg.replace(path,'')
    },
    handleSuccess(response, file, fileList) {
      // 上传成功的回调
      if(this.formData.reportImg==null||this.formData.reportImg==''){
        this.formData.reportImg=response.filePath
      }else {
        this.formData.reportImg+=';'+response.filePath
      }
      console.log(this.formData.reportImg)
    },
    handleError(err, file, fileList) {
      // 上传失败的回调
    },
    beforeAvatarUpload(file) {
      // 检查文件类型是否为JPG或PNG
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';

      // 检查文件大小是否小于50MB
      const isLt50M = file.size / 1024 / 1024 < 50;

      // 组合验证结果
      const isValidType = isJPG || isPNG;
      const isValidSize = isLt50M;

      // 显示错误信息
      if (!isValidType) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!');
      }
      if (!isValidSize) {
        this.$message.error('上传图片大小不能超过 50MB!');
      }

      // 必须同时满足类型和大小要求
      return isValidType && isValidSize;
    },
    /** 修改按钮操作 */ async getMessage() {

      // 从查询参数中获取名为 'param' 的值
      const paramValue =this.$route.params.id;
      console.log(paramValue)
      await getWell(paramValue).then(response => {
        this.message = response.data;
        this.formData.wellId=response.data.id;
        this.formData.wellNumber=response.data.wellNumber;

      });
    },
    submitForm() {
      this.$refs['机井编号'].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
      });
    },
    open() {
      this.$confirm('确认提交？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        addFault(this.formData).then(res => {
          this.$message({
            type: 'success',
            message: '提交成功!'
          });
          window.location.href="http://111.6.105.59:8111/faultReport?param="+this.formData.wellId
        }).catch(error => {
          this.$message({
            type: 'error',
            message: '提交失败'
          });
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    resetForm() {
      window.location.href="http://111.6.105.59:8111/faultReport?param="+this.formData.wellId
    },
  },
};


</script>

<style>
.form-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100px;

}
.el-upload-dragger {
  background-color: #fff;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 250px;
  height: 180px;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
</style>

